<template>
    <div>
        <el-input v-model="receiveOrderId" style="width: 150px;margin-left: 0px;margin-right: 20px;"
            placeholder="请输入单据编号或客户名或备注" clearable>
        </el-input>
        <span class="demonstration">日期：</span>
        <el-date-picker v-model="startTime" align="right" type="date" placeholder="选择开始日期"
            :picker-options="pickerOptions" @change="handleStartDateChange" style="margin-left: 10px;"></el-date-picker>

        <el-date-picker v-model="endTime" align="right" type="date" placeholder="选择结束日期" :picker-options="pickerOptions"
            @change="handleEndDateChange" style="margin-left: 10px;"></el-date-picker>

        源单编号：
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入供应商编号" clearable>
        </el-input>
        <el-button type="primary" style="margin-left: 20px;float: right;" @click="searchPage(1, 5)">查询</el-button>
        <div style="clear: both;"></div>


        <hr style="margin-top: 10px">

        <div style="float: right;clear: both;margin-top: 10px">
            <el-button type="primary" @click="goto('Rceipt')">新增</el-button>
            <el-button type="primary" @click="exportData()">导出</el-button>
        </div>
        <br>
        <div style="clear: both;"></div>
        <el-table height="300px" :data="pageInfo.list" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column fixed label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button @click="updateType(scope.row.id)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="单据日期" width="120">

            </el-table-column>
            <el-table-column prop="receiveOrderId" label="单据编号" width="120">
            </el-table-column>
            <el-table-column prop="initOrderId" label="源单编号" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.shouldFormList" :key="index">
                            <td>{{ detail.documentNum }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="customerName" label="客户" width="120">
            </el-table-column>
            <el-table-column prop="aName" label="结算账户" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.receiptFormDetailList" :key="index">
                            <td>{{ detail.aName }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="payoutMoney" label="收款金额" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.receiptFormDetailList" :key="index">
                            <td>{{ detail.money }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="payoutType" label="收款方式" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.receiptFormDetailList" :key="index">
                            <td>{{ detail.accountName }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="payAccount" label="结算号" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.receiptFormDetailList" :key="index">
                            <td>{{ detail.clearNum }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>

            <el-table-column prop="writeoffMoney" label="本次核销金额" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.shouldFormList" :key="index">
                            <td>{{ detail.nowMoney }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="preMoney" label="本次预收款" width="120">
            </el-table-column>
            <el-table-column prop="yid" label="业务员" width="120">
            </el-table-column>
            <el-table-column prop="checkId" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="doId" label="制单人" width="120">
            </el-table-column>
            <el-table-column prop="" label="备注" width="120">
                <template slot-scope="scope">
                    <table>
                        <tr v-for="(detail, index) in scope.row.receiptFormDetailList" :key="index">
                            <td>{{ detail.remark }}</td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            <el-table-column prop="shouldWrite" label="本单应核销金额" width="120">

            </el-table-column>
            <el-table-column prop="writeoffMoney" label="本单已核销金额" width="120">
            </el-table-column>
            <el-table-column label="本单未核销金额" width="120">
                <template slot-scope="scope">
                    {{ scope.row.shouldWrite - scope.row.writeoffMoney }}
                </template>
            </el-table-column>
            <el-table-column prop="isWriteOff" label="核销状态" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.isWriteOff === 0">已核销</span>
                    <span v-else-if="scope.row.isWriteOff === 1">未核销</span>
                    <span v-else-if="scope.row.isWriteOff === 2">部分核销</span>
                </template>
            </el-table-column>
            <el-table-column prop="city" label="单据来源" width="120">
            </el-table-column>
            <el-table-column prop="customerType" label="客户类别" width="120">
            </el-table-column>
        </el-table>

        <el-pagination style="position: relative;left: 30px;" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>

</template>

<script>
import axios from 'axios';
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top
    },
    data() {
        return {
            startTime: "",
            endTime: "",
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            pageInfo: "",
            receiveOrderId: "",
            yid: "",
            checkStatus: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

        };
    },
    methods: {
        generateRandomNumber() {
            return Math.floor(100000 + Math.random() * 900000); // 生成范围在 100000 到 999999 之间的随机数
        },
        exportData() {
            var multipleSelection = [];
            multipleSelection = this.pageInfo.list;//全部的收款单信息
            if (
                this.multipleSelection != null &&
                this.multipleSelection.length != 0
            ) {
                console.log("now", this.multipleSelection);
                multipleSelection = this.multipleSelection;//选择的信息
            }

            fetch("/cash/export/receiptForm", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(multipleSelection),
            })
                .then((response) => {
                    if (!response.ok) {
                        throw new Error("响应出错");
                    }
                    return response.blob();
                })
                .then((blob) => {
                    // 生成下载链接并下载文件
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.href = url;
                    var name = this.generateRandomNumber();
                    a.download = "收款单_" + name + ".xlsx"; // 设置下载的文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                .catch((error) => {
                    console.error("下载文件时出错:", error);
                });
        },
        handleCurrentChange(val) {
            this.searchPage(val, 5)
        },
        handleClick: function (id) {
            if (confirm("是否删除")) {
                axios({
                    url: "/cash/receipt/delete",
                    params: {
                        id: id
                    }
                }).then(rs => {
                    console.log(rs)
                    if (rs.data.code === 200) {
                        alert("删除成功")
                        this.searchPage(1, 5)
                    } else {
                        alert("删除失败")
                    }
                })
            }
        },
        updateType: function (id) {
            // alert(id)
            this.$router.push({ name: 'RceiptU', query: { id: id } });
        },
        searchPage: function (pageNum, pageSize) {
            this.axios({
                url: "/cash/receipt/receiptByPage",
                params: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    receiveOrderId: this.receiveOrderId,
                    startTime: this.startTime,
                    endTime: this.endTime
                }
            }).then(rs => {
                console.log(rs.data)
                this.pageInfo = rs.data.pageInfo


            })
        },
        goto() {
            this.$router.push(this.path)
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        handleNodeClick(data) {
            console.log(data);
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve([{ name: 'region1' }, { name: 'region2' }]);
            }
            if (node.level > 3) return resolve([]);

            var hasChild;
            if (node.data.name === 'region1') {
                hasChild = true;
            } else if (node.data.name === 'region2') {
                hasChild = false;
            } else {
                hasChild = Math.random() > 0.5;
            }

            setTimeout(() => {
                var data;
                if (hasChild) {
                    data = [{
                        name: 'zone' + this.count++
                    }, {
                        name: 'zone' + this.count++
                    }];
                } else {
                    data = [];
                }

                resolve(data);
            }, 500);
        },
        goto(to) {
            this.$router.push(to)
        },
        handleStartDateChange(val) {
            console.log('开始日期改变：', val);
            this.startTime = val

            // 可以在这里处理开始日期改变后的逻辑
        },
        handleEndDateChange(val) {
            console.log('结束日期改变：', val);
            this.endTime = val
            // 可以在这里处理结束日期改变后的逻辑
        }
    },
    created: function () {
        this.searchPage(1, 5)
    }
}
</script>

<style>
tr {
    border: 1px solid black;
}
</style>